<template>
  <page-header-wrapper>
    <div class="user-wrapper">
      <div class="user-wrapper-left user-wrapper-item">
        <tree-dept @change="handleDeptChange"/>
      </div>
      <div class="user-wrapper-right user-wrapper-item">
        <user :dept-id="deptId"/>
      </div>
    </div>
  </page-header-wrapper>
</template>

<script>
import User from '@/views/platform/user/user'
import treeDept from "@/views/platform/user/treeDept";
export default {
  name: 'Users',
  components: {
    User,
    treeDept,
  },
  data () {
    return {
      deptId: undefined,
    }
  },
  methods: {
    handleDeptChange(e) {
      this.deptId = e.toString();
    }
  }
}
</script>
<style lang="less" scoped>
  .user-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    &-left {
      width: 15vw;
      position: absolute;
      height: 76vh;
      top: 0;
      left: 0;
      background: #ffffff;
    }
    &-right {
      position: absolute;
      height: 76vh;
      top: 0;
      right: 0;
      left: calc(15vw + 15px);
      background: #ffffff;
    }
  }
</style>
